.card-shape {
	padding: 0;
	width:100%;
	height:100%;
	z-index:10;
	padding-bottom: 1em;
}

#close-frame-button {
    display: inline-block;
    margin: 0 0 0.8em 0;
	padding: 0 1em;
    width: auto;
}

#poll-result.hidden {
	opacity:0;
	display:none;
}


#model {display:none;}

.poll-info {width:auto; margin:0 48px 1em 48px; position:relative; padding-top:1em;}
.poll-info em {font-style:normal; font-weight:bolder;}

.poll-status {
	position:absolute;
	left:100%;
	top:0;
}

.total-number {
	color:#EB6841;
	font-size:1.1em;
	line-height:1.8em;
}
.poll-type {
	color:#A9A9A9;
	font-size:0.9em;
	line-height:1.4em;
}
.poll-deadline {
	color:#A9A9A9;
	font-size:0.9em;
	line-height:1.4em;
	text-align:center;
	font-weight:normal;
	margin-bottom: 1em;
}

.poll-options {
	width:auto;
	margin:0 48px;
}
.poll-options li{
	position:relative;
	height:2em;
	width:100%;
	margin:1em 0;
	background:#DBDBDB;
	list-style:none;
}

.poll-options .checkbox{
	position:absolute;
	height:2em;
	width:2em;
	margin-top:-1em;
	top:50%;
	line-height:2em;
	text-align:center;
	list-style:none;
	color:#fff;
	text-shadow:0 0 1px #990000;
	z-index:2;
	background-image:url(img/checkbox.png);
	background-size:23px;
	background-repeat:no-repeat;
	background-position:center center;
}
.poll-options .checkbox.checked{
	background-image:url(img/checkbox-checked.png);
}
	

.poll-options .front {
	position:absolute;
	height:100%;
	top:0;left:0;
	background:#F9CC8A;
	color:#fff;
	z-index:0;
}

.poll-options .name {
	position:absolute;
	height:2em;
	top:0;left:0;
	padding:0 3.2em 0 2em;
	line-height:2em;
	color:#fff;
	overflow: hidden;
	/*white-space:nowrap;*/
	text-overflow:ellipsis;
	z-index:1;
}
.poll-options .number{
	position:absolute;
	height:2em;
	top:0;right:0;
	padding:0 0.8em;
	line-height:2em;
	color:#DFAF6A;
	z-index:1;
}


.chart-area {
	position:relative; 
	width:80%;
	max-width:400px;
	margin:1em auto;
	max-height:400px;
}



#chart-section{width:auto; padding:0 1em 4em 1.6em; margin-top:3em;}
#chart-section[data-chart-type='pie'] #canvas-wrap-pie {display:block;}
#chart-section[data-chart-type='pie'] #canvas-wrap-bar {display:none;}
#chart-section[data-chart-type='bar'] #canvas-wrap-bar {display:block;}
#chart-section[data-chart-type='bar'] #canvas-wrap-pie {display:none;}

#chart-section .toggle-btn {
	display:block;
	position:absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%);
	width:10em;
	line-height:2em;
	margin:0.6em auto;
	font-size:0.9em;
	text-align:center;
	color:white;
	background:#EB6841;
	border-radius:6px;
	text-decoration:none;
}

#chart-section canvas { margin: 0 auto; }

#chart-section table {position: relative;  width:100%; table-layout:fixed; }
#chart-section .legend-cell { width:33.3%; }
#chart-section .canvas-cell { width:66.6%; }
	.chart-legend { font-size:14px; color:gray; list-style:none;}
		.chart-legend li {margin-bottom:6px;}
		.chart-legend span{display:inline-block; width:14px; line-height:14px; margin-right:3px;}

#chart-section.only-canvas .legend-cell { display:none; }
	#chart-section.only-canvas .canvas-cell { width: 80%; min-width:200px; }

#chart-section.hidden { display:none;}

/*********** Record Page **************/
#poll-record {
	display:block;
	position:fixed;
	top:0;left:0;
	width:100%;
	height:100%;
	padding: 1em 0.8em 0 0.8em;
	box-sizing:border-box;
	/*background: rgba(0,0,0,0.3);*/
	z-index:10;
	transition: 0.2s all ease-out;
	will-change: transform;
}

#poll-record.hidden {
	top: 20%;
	opacity: 0;
	visibility: hidden;
}

#poll-record:before{
	content:' ';
	display:none;
	position:fixed;
	top:0;bottom:0;left:0;right:0;
	background:rgba(0,0,0,0.5);
	z-index:9;
}
	#poll-record .card-shape {
		border-bottom-left-radius:0; border-bottom-right-radius:0;
		box-shadow: 0 0 1em 0.5em rgba(0,0,0,0.3); 
		/*box-shadow: 0 3em 0 3em rgba(0,0,0,0.6);*/
	}
	#poll-record .option-info {
		position:absolute;
		width:100%;
		margin:0;
	}
	#poll-record h4{
		width:100%;
		margin:0;
		padding:0em 2em 0.0em 0.8em;
		box-sizing: border-box;
		line-height:2.4em;
		font-size:1.2em;
		height:2.4em;
		font-weight:normal;
		background:#EB6841;
		color:#FFFFFF;
		overflow: hidden;
	}
	#poll-record .close-btn{
		display:inline-block;
		position:absolute;
		/*float:right;*/
		top:0.1em; right:0;
		width:1.6em;height:1.6em;
		margin: 0.6em 0.6em 0 0;
		border-radius:50%;
		background:url(img/poll-close-btn-white.png) no-repeat center center;
		background-size:1em 1em;
	}
	#poll-record .total-num{
		color:#A9A9A9;
		font-size:1em;
		padding:0.4em 1.2em 0 1.2em;
		margin:0;
		line-height:1.2em;
		text-align:right;
	}
	
	#poll-record .record-list {
		position:absolute;
		top:5em;bottom:0;left:0;right:0;
		padding:0;
		overflow-y:auto;
	}

	#model-record { display:none;}
	.record-list ul {
		list-style:none;
	}
	.record-list li {
		margin:0 0.5em 0.4em 0.5em;
		padding:0.6em 0.5em;
		border-top: 0px dashed gray;
	}

	.record-list .avatar-wrap {
		display:block;
		float:left;
		width:2.6em; height:2.6em;
		border-radius:50%;
		background:#E0E0E0 url(img/default-avatar.png) center center no-repeat;
		background-size: 100% 100%;
		margin:0 0.6em 0 0;
		overflow:hidden;
	}
	.record-list .avatar {
		display:block;
		width:2.6em; height:2.6em;
		border-radius:50%;
		border: none;
	}

	.time, .nickname{
		display:block;
		font-size:1em;
		line-height:1.3em;
		color:#676767;
	}
	.record-list .info {
		float:right;
		padding:0;
		font-size:1em;
		line-height:2.6em;
	}
	.record-list .will{display:inline-block; width:6em; color:#A9A9A9; text-align:right;}
	.record-list .will-num {color:#EB6841;}
	.record-list .will-num:after {content:'%';}

